<template>
  <view class="category-page">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <image class="search-icon" src="/static/imgs/search-normal.png" />
        <input type="text" placeholder="搜索商品" v-model="searchText" @confirm="handleSearch" />
      </view>
    </view>

    <!-- 分类标题 -->
    <view class="category-title">
      <text>{{ categoryTitle }}</text>
      <text class="sub-title">{{ categorySubTitle }}</text>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-item" v-for="(item, index) in productList" :key="index" @click="goToDetail(item)">
        <image class="product-image" :src="item.image" mode="aspectFill" />
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-desc">{{ item.desc }}</text>
          <view class="price-row">
            <text class="price">¥{{ item.price }}</text>
            <text class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: '',
      searchText: '',
      categoryTitle: '',
      categorySubTitle: '',
      productList: []
    }
  },
  
  onLoad(options) {
    this.type = options.type
    this.initPageData()
  },
  
  methods: {
    initPageData() {
      const categoryMap = {
        apple: {
          title: '苹果手机',
          subTitle: '品质保证 快速发货',
          products: [
            {
              name: 'iPhone 16 Pro Max',
              desc: ' 256GB 沙漠钛金属',
              price: '8999',
              originalPrice: '9999',
              image: '/static/ff/ff1.png'
            },
            {
              name: 'iPhone 16 Pro',
              desc: ' 256GB 原色钛金属',
              price: '6999',
              originalPrice: '7999', 
              image: '/static/ff/ff2.png'
            }
          ]
        },
        android: {
          title: '安卓手机',
          subTitle: '高性价比 品质保证',
          products: [
            {
              name: '华为 Mate70 Pro',
              desc: ' 12+512GB 云衫绿',
              price: '5999',
              originalPrice: '6999',
              image: '/static/ff/ff3.png'
            },
            {
              name: '小米15 Pro',
              desc: '16+512GB 岩石黑',
              price: '5799',
              originalPrice: '6999',
              image: '/static/ff/ff4.png'
            }
          ]
        },
        used: {
          title: '二手优品',
          subTitle: '严格质检 售后无忧',
          products: [
            {
              name: 'iPhone 14 Pro ',
              desc: '95新 256GB 暗紫色',
              price: '5999',
              originalPrice: '6999',
              image: '/static/ff/ff5.png'
            },
            {
              name: 'HUAWEI MatePad Pro 2025款',
              desc: ' 95新 12+256GB 柔光版',
              price: '4999',
              originalPrice: '5699',
              image: '/static/ff/ff6.png'
            }
          ]
        },
        tablet: {
          title: '平板电脑',
          subTitle: '轻薄便携 办公娱乐',
          products: [
            {
              name: 'iPad Pro 13',
              desc: ' 2024款 M4芯片 256GB',
              price: '8799',
              originalPrice: '11499',
              image: '/static/ff/ff7.png'
            },
            {
              name: 'HUAWEI MatePad Pro',
              desc: ' 13.2英寸 12+512GB',
              price: '5099',
              originalPrice: '5699',
              image: '/static/ff/ff8.png'
            }
          ]
        },
        game: {
          title: '游戏电玩',
          subTitle: '畅玩无限 快乐加倍',
          products: [
            {
              name: 'PS5 数字版',
              desc: '白色 825GB',
              price: '3999',
              originalPrice: '4999',
              image: '/static/ff/ff9.png'
            },
            {
              name: 'Switch OLED',
              desc: '白色 64GB',
              price: '2999',
              originalPrice: '3499',
              image: '/static/ff/ff10.png'
            }
          ]
        },
        drone: {
          title: '航拍影音',
          subTitle: '高空视角 记录精彩',
          products: [
            {
              name: 'DJI OSMO Pocket 3',
              desc: ' 标准版',
              price: '3499',
              originalPrice: '3749',
              image: '/static/ff/ff11.png'
            },
            {
              name: 'DJI Neo ',
              desc: ' 套装版',
              price: '3999',
              originalPrice: '4999',
              image: '/static/ff/ff12.png'
            }
          ]
        },
        home: {
          title: '家庭影音',
          subTitle: '视听享受 品质生活',
          products: [
            {
              name: 'Redmi投影仪 3 Pro',
              desc: ' ToF无感自动对焦',
              price: '1499',
              originalPrice: '1699',
              image: '/static/ff/ff13.png'
            },
            {
              name: 'Harman Kardon Aura Studio 4',
              desc: ' 桌面式 立体声',
              price: '1999',
              originalPrice: '2499',
              image: '/static/ff/ff14.png'
            }
          ]
        },
        office: {
          title: '办公设备',
          subTitle: '提升效率 专业之选',
          products: [
            {
              name: '惠普打印机',
              desc: ' DJ喷墨打印机',
              price: '315',
              originalPrice: '329',
              image: '/static/ff/ff15.png'
            },
            {
              name: 'Logitech G502 LIGHTSPEED',
              desc: ' 无限鼠标',
              price: '449',
              originalPrice: '689',
              image: '/static/ff/ff16.png'
            }
          ]
        }
      }
      
      const category = categoryMap[this.type] || {
        title: '商品分类',
        subTitle: '全部商品',
        products: []
      }
      
      this.categoryTitle = category.title
      this.categorySubTitle = category.subTitle
      this.productList = category.products
      
      // 设置页面标题
      uni.setNavigationBarTitle({
        title: category.title
      })
    },
    
    handleSearch() {
      if (!this.searchText.trim()) {
        uni.showToast({
          title: '请输入搜索内容',
          icon: 'none'
        })
        return
      }
      // 实现搜索逻辑
    },
    
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/detail?type=${this.type}&name=${encodeURIComponent(item.name)}`
      })
    }
  }
}
</script>

<style lang="scss">
.category-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20rpx;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
  
  .search-input {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 15rpx 20rpx;
    border-radius: 30rpx;
    
    .search-icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
    
    input {
      flex: 1;
      font-size: 28rpx;
    }
  }
}

.category-title {
  padding: 30rpx;
  background-color: #fff;
  margin-top: 20rpx;
  
  text {
    font-size: 32rpx;
    font-weight: bold;
    margin-right: 20rpx;
  }
  
  .sub-title {
    font-size: 24rpx;
    color: #666;
    font-weight: normal;
  }
}

.product-list {
  padding: 20rpx;
  
  .product-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    
    .product-image {
      width: 100%;
      height: 400rpx;
    }
    
    .product-info {
      padding: 20rpx;
      
      .product-name {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
      
      .product-desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 15rpx;
      }
      
      .price-row {
        display: flex;
        align-items: center;
        
        .price {
          color: #f00;
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 15rpx;
        }
        
        .original-price {
          color: #999;
          font-size: 24rpx;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style> 